//
//  AsymmetricTransitions.swift
//  SwiftUIAnimation
//
//  Created by 李煜 on 2024/8/21.
//

import SwiftUI

//不对称转场: 视图插入和移除时使用的转场效果不同,系统默认使用对称转场(例如,插入时使用放大,移除时使用缩小)
struct AsymmetricTransitions: View {
  @State private var showPurple = false
  var body: some View {
    VStack {
      RoundedRectangle(cornerRadius: 10)
        .frame(width: 300, height: 300)
        .foregroundStyle(.green)
        .overlay {
          Text("green")
            .foregroundStyle(.white).font(.system(.largeTitle, design: .rounded))
            .bold()
        }
      if showPurple {
        RoundedRectangle(cornerRadius: 10)
          .frame(width: 300, height: 300)
          .foregroundStyle(.purple)
          .overlay {
            Text("purple ")
              .foregroundStyle(.white).font(.system(.largeTitle, design: .rounded))
              .bold()
          }
        // 使用自己的可重用转场
        // 不对称转场
          .transition(.scaleAndOffset)
        
      }
    }
    .onTapGesture {
      withAnimation(.easeInOut(duration: 2)) {
        showPurple.toggle()
      }
    }
  }
}
#Preview {
    AsymmetricTransitions()
}

extension AnyTransition {
  static var scaleAndOffset: AnyTransition {
    .asymmetric(insertion: .scale(scale: 0, anchor: .bottom), removal: .offset(x: -600, y: 0))
  }
}
